<!-- pages/index/index.vue -->
<script setup>
	import { computed, ref } from 'vue'
	import feedList from './components/feed-list.vue'
	import doctorList from './components/doctor-list.vue'
	import { getKnowledgeListAPI, getDoctorListAPI } from '@/apis/doctor'
	// 获取安全区域数据
	const { safeAreaInsets } = uni.getSystemInfoSync()
	// 标签页索引值
	const tabIndex = ref(0)
	const feedTabs = ref([
		{
			label: '推荐',
			type: 'recommend',
			current: 1,
			hasMore: true,
			list: [],
			rendered: true
		},
		{
			label: '关注',
			type: 'like',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false
		},
		{
			label: '减脂',
			type: 'fatReduction',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false
		},
		{
			label: '饮食',
			type: 'food',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false
		}
	])

	// 记录 type
	const feedType = computed(() => feedTabs.value[tabIndex.value].type)
	// 记录 current 当前页码
	const feedCurrent = computed(() => feedTabs.value[tabIndex.value].current)
	// 每一页显示多少条数据
	const feedPageSize = ref(5)

	// 切换标签页
	function onFeedTabChange({ index }) {
		// console.log(index)
		tabIndex.value = index
		// 如果没有加载数据就发送请求
		if (feedTabs.value[index].rendered === false) getKnowledgeList()
		// 做组件缓存 看看这个组件是否已经被渲染过了
		feedTabs.value[index].rendered = true
		// getKnowledgeList()
	}

	// 获取知识列表
	const getKnowledgeList = async () => {
		// 开始请求
		uni.showLoading({
			title: '正在加载中....',
			mask: true
		})
		const res = await getKnowledgeListAPI({
			type: feedType.value,
			current: feedCurrent.value,
			pageSize: feedPageSize.value
		})
		// 请求结束
		uni.hideLoading()

		// 获取对应的list
		const list = feedTabs.value[tabIndex.value].list
		// 将获取的数据写入进去
		feedTabs.value[tabIndex.value].list = [...list, ...res.data.rows]

		// 更新当前的current的值
		const current = feedTabs.value[tabIndex.value].current
		feedTabs.value[tabIndex.value].current = current + 1
		// 更新hasMore数据 判断是否还有更多数据
		feedTabs.value[tabIndex.value].hasMore = current + 1 <= res.data.pageTotal
	}

	getKnowledgeList()

	// 浏览器滚动到底部时触发
	const onScrolltolower = () => {
		// console.log(11111)
		// 如果 feedTabs里面的数组的元素的hasMore的值为true 就表示还有更多数据 我们就加载
		if (feedTabs.value[tabIndex.value].hasMore) getKnowledgeList()
	}
	
	// 获取首页-关注的医生列表
	const doctorArr = ref([])
	const getDoctorList = async () => {
		const res = await getDoctorListAPI()
		// console.log(res)
		doctorArr.value = res.data.rows
	}
	
	getDoctorList()

	
</script>
<template>
	<scroll-page @scrolltolower="onScrolltolower">
		<view
			class="index-page"
			:style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
		>
			<!-- 页面导航 -->
			<view
				:style="{ paddingTop: safeAreaInsets.top + 'px' }"
				class="page-navbar"
				>优医</view
			>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<input
					placeholder-class="input-placeholder"
					placeholder="搜一搜: 疾病/症状/医生/健康知识"
					class="input"
					type="text"
				/>
				<view class="icon-search">
					<uni-icons size="22" color="#C3C3C5" type="search" />
				</view>
			</view>
			<!-- 快速入口 -->
			<view class="quick-entry">
				<navigator hover-class="none" class="quick-entry-item">
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-1.png"
					/>
					<text class="label">问医生</text>
					<text class="small">按科室查问医生</text>
				</navigator>
				<navigator
					hover-class="none"
					class="quick-entry-item"
					url="/subpkg_consult/quickly/index?type=2"
				>
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-2.png"
					/>
					<text class="label">极速问诊</text>
					<text class="small">20s医生极速回复</text>
				</navigator>
				<navigator hover-class="none" class="quick-entry-item">
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-3.png"
					/>
					<text class="label">开药门诊</text>
					<text class="small">线上买药更方便</text>
				</navigator>
			</view>
			<!-- 快速查看 -->
			<view class="quick-view">
				<navigator
					hover-class="none"
					class="quick-view-item"
					url="/subpkg_medicine/order_list/index"
				>
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-1.png"
					/>
					<text class="label">药品订单</text>
				</navigator>
				<navigator
					hover-class="none"
					class="quick-view-item"
					url="/subpkg_archive/list/index"
				>
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-2.png"
					/>
					<text class="label">健康档案</text>
				</navigator>
				<navigator hover-class="none" class="quick-view-item">
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-3.png"
					/>
					<text class="label">我的处方</text>
				</navigator>
				<navigator hover-class="none" class="quick-view-item">
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-4.png"
					/>
					<text class="label">疾病查询</text>
				</navigator>
			</view>
			<!-- 广告位 -->
			<view class="banner-placeholder">
				<swiper
					class="uni-swiper"
					indicator-dots
					indicator-color="#ffffff99"
					indicator-active-color="#fff"
					circular
				>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image class="banner-image" src="/static/images/banner-1.png" />
						</navigator>
					</swiper-item>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image
								class="banner-image"
								src="/static/images/banner-1.png"
								mode="aspectFill"
							/>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<!-- 标签切换 -->
			<view
				class="doctor-feeds"
				:style="{ marginTop: -safeAreaInsets.top + 'px' }"
			>
				<custom-sticky :offset-top="safeAreaInsets.top + 'px'">
					<custom-tabs @click="onFeedTabChange" :list="feedTabs" />
				</custom-sticky>

				<!-- 关注知识列表 -->
				<view
					v-for="(item, index) in feedTabs"
					:key="item.type"
					class="item"
					v-show="index === tabIndex"
				>
					<!-- 关注医生 -->
					<doctor-list v-if="item.type === 'recommend'" :list="doctorArr"></doctor-list>
					<!-- 知识列表 -->
					<feed-list v-if="item.rendered" :list="item.list"></feed-list>
				</view>
			</view>
			<!-- 标签页列表 -->
		</view>
	</scroll-page>
</template>
<style lang="scss">
	@import './index.scss';
</style>
